<template>
	<div>
		<el-form class="form-container"  v-loading="formLoading" :model="postForm" :rules="rules" ref="postForm" label-width="200px" label-position="right">
      <el-form-item label="电话：" prop="phone">
        <el-input v-model="postForm.phone" placeholder="电话" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="postForm.email" placeholder="邮箱" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="QQ：" prop="qq">
        <el-input v-model="postForm.qq" placeholder="QQ" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="地址：">
        <el-row>
          <el-select clearable v-model="postForm.provinceId" @change="areaChange" placeholder="选择省">
            <el-option v-for="item in provinceList" :key="item.areaId" :label="item.name" :value="item.areaId">
            </el-option>
          </el-select>
          <el-select clearable v-model="postForm.cityId" @change="areaChange" placeholder="选择市">
            <el-option v-for="item in cityList" :key="item.areaId" :label="item.name" :value="item.areaId">
            </el-option>
          </el-select>
          <el-select clearable v-model="postForm.areaId" placeholder="选择县/区">
            <el-option v-for="item in areaList" :key="item.areaId" :label="item.name" :value="item.areaId">
            </el-option>
          </el-select>
        </el-row>
        <!-- <v-distpicker :province="postForm.provinceId" :city="postForm.cityId" :area="postForm.areaId"></v-distpicker> -->
      </el-form-item>
      <el-form-item label="详细地址：">
        <el-input v-model="postForm.address" placeholder="详细地址" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="经纬度：" v-show="postForm.areaId">
        <el-input v-model="coordinate" disabled placeholder="经纬度" style="width: 400px;margin-right:20px;"></el-input>
        <span>
          <el-button @click="searchOption">获取坐标</el-button>
        </span>
        <!-- <span v-else>正在定位</span> -->
      </el-form-item>
      <el-form-item label="坐标：" v-show="loaded && postForm.areaId">
        <!-- 地图 -->
        <div class="amap-page-container">
          <div id="container" style="width:500px;height:300px;"></div>
        </div>
      </el-form-item>
      <el-form-item label="联系我们：">
        <tinymce :height="300" v-model="postForm.contactUsDesc" style="width: 80%"></tinymce>
      </el-form-item>
	    <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
	  </el-form>
  </div>
</template>

<script>
import { getAreaList, getContactInfo, saveContactInfo } from '@/api/basicDatum'
import Tinymce from '@/components/Tinymce'
import authority from '@/components/noneTemplate/authority.vue'
import { AMapManager } from 'vue-amap'
import { shopManage_basicDatum } from '@/utils/permission'
const postForm = {
  phone: null,
  email: null,
  qq: null,
  provinceId: null,
  cityId: null,
  areaId: null,
  address: null,
  lat: null, // 经度
  lng: null, // 纬度
  content: null
}

const rules = {
// phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
// email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
// qq: [{ required: true, message: '请输入QQ', trigger: 'blur' }]
}

export default {
  name: 'contact',
  components: { Tinymce, AMapManager, authority },
  created() {
    this.getModelPermission()
    this.initData()
    this.getAreaList()
  },
  data() {
    const self = this
    return {
      permission: 3,
      postForm: Object.assign({}, postForm),
      rules,
      map: null,
      geocoder: null,
      marker: null,
      coordinate: null,
      provinceList: [],
      cityList: [],
      areaList: [],
      btnLoading: false,
      formLoading: false,
      loaded: false
    }
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_basicDatum()
    },
    addMarker: function() {
      const lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      const lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers.push([lng, lat])
    },
    searchOption() {
      var _this = this
      this.loaded = true
      _this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13
      })
      AMap.service('AMap.Geocoder', function() {
        _this.geocoder = new AMap.Geocoder({})
        _this.marker = new AMap.Marker({
          map: _this.map,
          bubble: true
        })
      })
      // 获取地址
      const address = _this.provinceList.find(item => item.areaId === _this.postForm.provinceId)['name'] +
      _this.cityList.find(item => item.areaId === _this.postForm.cityId)['name'] +
      _this.areaList.find(item => item.areaId === _this.postForm.areaId)['name'] +
      _this.postForm.address
      // 根据地址获取坐标
      this.getPosition(address)
      // 点击地图获取坐标
      _this.map.on('click', function(e) {
        _this.marker.setPosition(e.lnglat)
        _this.postForm.lat = e.lnglat.lat
        _this.postForm.lng = e.lnglat.lng
        _this.coordinate = e.lnglat.lat + ',' + e.lnglat.lng
      })
    },
    getPosition(address) {
      var _this = this
      this.geocoder.getLocation(address, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
          _this.marker.setPosition(result.geocodes[0].location)
          _this.map.setCenter(_this.marker.getPosition())
          _this.postForm.lat = result.geocodes[0].location.lat
          _this.postForm.lng = result.geocodes[0].location.lng
          _this.coordinate = result.geocodes[0].location.lat + ',' + result.geocodes[0].location.lng
        }
      })
    },
    initData() {
      getContactInfo().then(res => {
        if (res.data.data) {
          this.postForm = res.data.data
          this.postForm.provinceId = this.postForm.provinceId == 0 ? null : this.postForm.provinceId
          this.postForm.cityId = this.postForm.cityId == 0 ? null : this.postForm.cityId
          this.postForm.areaId = this.postForm.areaId == 0 ? null : this.postForm.areaId
          this.postForm.lat = this.postForm.lat == 0 ? null : this.postForm.lat
          this.postForm.lng = this.postForm.lat == 0 ? null : this.postForm.lng
          if (this.postForm.provinceId) {
            this.areaChange(this.postForm.provinceId, false)
          }
          if (this.postForm.cityId) {
            this.areaChange(this.postForm.cityId, false)
          }
          if (this.postForm.lat && this.postForm.lng) {
            this.coordinate = this.postForm.lat + ',' + this.postForm.lng
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getAreaList() {
      getAreaList().then(res => {
        this.provinceList = res.data.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    areaChange(val, isfre = true) {
      if (isfre) {
        this.areaList = null
        this.postForm.areaId = null
      }
      if (!val) {
        this.cityList = null
        this.postForm.cityId = null
        return false
      }
      getAreaList(val).then(res => {
        if (res.data.data.level == 2) {
          if (isfre) {
            this.postForm.cityId = null
          }
          this.cityList = res.data.data.data
        } else if (res.data.data.level == 3) {
          this.areaList = res.data.data.data
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return
          }
          this.btnLoading = true
          this.formLoading = true
          saveContactInfo(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>
<style>
.amap-demo, #amap{
  height: 300px !important;
}
.search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .amap-page-container {
    position: relative;
  }
</style>

